This To-Do App is a productivity-focused task manager designed with simplicity and interactivity in mind. Inspired by a Frontend Mentor challenge, it allows users to manage their daily tasks efficiently—adding, completing, deleting, and filtering tasks based on their status. The app also features a dark/light mode toggle to enhance user comfort across environments.
Building a seamless task management experience involved handling a range of user interactions—from real-time input tracking to managing multiple task states (active, completed, all). Implementing intuitive features like keyboard shortcuts, hover effects, and dynamic filtering required thoughtful state management and user-focused design decisions.
Using React, TypeScript, and Tailwind CSS, I developed a lightweight yet fully interactive application. Key features include: A toggle for switching between dark and light themes, Keyboard handling with onKeyDown to enhance form input interactions, Contextual UI feedback using onMouseEnter to reveal controls on hover, Robust state management using useState and functional updates to manage task arrays efficiently, and Filter controls to display All, Active, or Completed tasks.
The result is a responsive and polished task manager that delivers a smooth and intuitive user experience. This project reinforced my understanding of React’s state logic, improved my handling of conditional rendering and events, and expanded my familiarity with accessible user interface design. It’s a great example of how small applications can be powerful learning tools and showcase practical frontend skills.
